import React, { useState } from 'react';
import { withRouter } from 'react-router-dom';
import './index.css';
import {Input, message} from 'antd';
import { evidenceTop } from '@/utils/api';
import {connect} from "react-redux";
import Header from "../../components/Header/Header"
import Footer from "../../components/Footer/Foot"

const { Search } = Input;

interface IState {
  list: any
}

interface IProps {
  login: any,
  register: any,
  history: any,
  match:any
}
class Index extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      list: []
    }
      sessionStorage.setItem("path", this.props.match.path)

    evidenceTop(
        "大海"
    )
        .then((res: any) => {
          console.log(res)
          this.setState({
            list: res.data,
          });
        })
        .catch((error: any) => {
          message.error(error);
        })
  }


  render () {
    console.log(this.state)
    const { list } = this.state
    return (
        <div className="boxIndex">

            <Header></Header>
      <div className="home" >
          <div className="home_auto">
              <div className="home_top">
                  <div className="left">
                      <div className="left_top">
                          <img src={require("../../assets/img/homeImg2.png")} className="homeimg2" />
                              <img src={require("../../assets/img/homeImg3.png")}  className="homeimg3" />
                      </div>
                      <div className="text">本平台采用区块链技术构建可信任的数字科研共享环境，将科研过程中形成的证据材料使用区块链技术进行存证，形成科学论文证据链，解决科研过程证据材料的原始性和完整性问题，同时证据材料的所有权由整个受信任的科研网络进行共识，为科研协作过程的产出提供去中心化的确权服务，提高科学研究过程的透明度。</div>
                  </div>
                  <img src={require("../../assets/img/homeImg4.png")} alt=""  className="homeimg4"/>
              </div>
              <div className="home_cen">
                  <div className="h5">
                      <span className="span1"></span>
                      账本组织结构
                      <span className="span2"></span>
                  </div>
                  <div className="h6">organizational structure</div>
                  <div className="textImg">
                      <div className="text">
                          区块链技术的分布式架构，可从管理上实现高度中心化的信息管理机制，实现物理分布和逻辑分布的高度统一。科研过程的数据资产和对应的科研账本由各研究机构分布式存储，实现各主体机构的互相对等。同时，各机构节点的科研账本汇总形成科研总帐本，由科研道德委员会进行科研过程审计，文献情报中心利用账本元数据进行知识组织，服务科研人员针对科研过程交流的需求，并研发基于“微贡献”的科研评价机制。
                      </div>
                      <img src={require("../../assets/img/homeImg5.png")}  />
                  </div>
              </div>
              <div className="home_bottom">
                  <div className="h5">
                      <span className="span1"></span>
                      服务对象
                      <span className="span2"></span>
                  </div>
                  <div className="h6">service object</div>
                  <div className="ul">
                      <div className="li li1">
                          <img src={require("../../assets/img/homeImg6.png")} />
                              <div>科研机构</div>
                      </div>
                      <div className="li li2">
                          <img src={require("../../assets/img/homeImg7.png")} />
                              <div>出版机构</div>
                      </div>
                      <div className="li li3">
                          <img src={require("../../assets/img/homeImg8.png")} />
                              <div>科研人员</div>
                      </div>
                      <div className="li li4">
                          <img src={require("../../assets/img/homeImg9.png")} />
                              <div>社会大众</div>
                      </div>
                  </div>
              </div>
          </div>
      </div>

            <Footer></Footer>

  </div>
    )
  }
}


export default withRouter(connect((state: any) => state.user, {  evidenceTop })(Index))



